<template>
    <section class="bg-box">
      <img :src="img_jigsaw1" alt="">
      <img :src="img_jigsaw2" alt="">
      <img :src="img_jigsaw3" alt="">
      <img :src="img_jigsaw4" alt="">
      <img :src="img_jigsaw5" alt="">
      <img :src="img_jigsaw6" alt="">
    </section>
</template>

<script type="text/ecmascript-6">

  import img_jigsaw1 from '../../assets/img/拼图及碎片/1.png'
  import img_jigsaw2 from '../../assets/img/拼图及碎片/2.png'
  import img_jigsaw3 from '../../assets/img/拼图及碎片/3.png'
  import img_jigsaw4 from '../../assets/img/拼图及碎片/4.png'
  import img_jigsaw5 from '../../assets/img/拼图及碎片/5.png'
  import img_jigsaw6 from '../../assets/img/拼图及碎片/6.png'

  export default {
    data() {
      return {
        img_jigsaw1:img_jigsaw1,
        img_jigsaw2:img_jigsaw2,
        img_jigsaw3:'',
        img_jigsaw4:img_jigsaw4,
        img_jigsaw5:'',
        img_jigsaw6:img_jigsaw6,
      }
    },
    methods: {

    },
  }
</script>

<style scoped lang="scss">

  .bg-box{
    width: 400px;
    height: 400px;
    background: url('../../assets/img/拼图及碎片/灰拼图.png') no-repeat;
    background-size: 100% 100%;
    position: relative;

    img{
      position: absolute;
      width:200px;
      height: 133px;
    }

    img:nth-child(1){
      top: 0;
      left: 0;

    }

    img:nth-child(2){
      top: 0;
      left: 200px;
    }

    img:nth-child(3){
      top: 133px;
      left: 0;
    }

    img:nth-child(4){
      top: 133px;
      left: 200px;
    }

    img:nth-child(5){
      top: 266px;
      left: 0;
    }

    img:nth-child(6){
      top: 266px;
      left: 200px;
    }
  }
</style>
